var leader = 0,
  target = 0,
  timer = null;

var sliderBox = document.getElementById("slider-box"),
  ul = sliderBox.children[0].children[0],
  lis = ul.children,
  prevBtn = sliderBox.children[1],
  nextBtn = sliderBox.children[2],
  liWidth = lis[0].offsetWidth;

var i = 0;

nextBtn.onclick = function () {
  if (i >= lis.length - 4) {
    ul.style.left = 0;
    i = 0;
  }
  i++;
  animate(ul, -liWidth * i);
};

prevBtn.onclick = function () {
  if (i <= 0) {
    ul.style.left = -(lis.length - 4) * liWidth + "px";
    i = lis.length - 4;
  }
  i--;
  animate(ul, -liWidth * i);
};

function animate(ele, target) {
  clearInterval(ele.timer); //清楚历史定时器
  ele.timer = setInterval(function () {
    //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
    var step = (target - ele.offsetLeft) / 10;
    //对步长进行二次加工(大于0向上取整,小于0项下取整)
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //动画原理： 目标位置 = 当前位置 + 步长
    ele.style.left = ele.offsetLeft + step + "px";
    //检测缓动动画有没有停止
    if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
      ele.style.left = target + "px"; //直接移动指定位置
      clearInterval(ele.timer);
    }
  }, 30);
}